<?php
    session_start();
    include('top.php');
    $uid = $_SESSION['id'];
?>
    <style>
        #ui_div_border {
            visibility: hidden;
        }
    </style>
    <div class="home-body">
        <?php include('info.php'); ?>

            <div class="home-container-body">
                <div class="home-side-by-side-start" style="width: 300px;">
                    <h2 class="home-title">修改密码</h2>
                    <form id="passForm" style="text-align: center;">
                        新密码：
                        <input type="password" name="password" class="index_input">
                        <input type="submit" value="修改" class="my-home-submit" id="PassSubmit">
                    </form>
                </div>
            </div>
    </div>
    <div class="ui_div_border" id="ui_div_border">
        <table class="ui_border ui_state_visible ui_state_focus ui_state_lock" id="alert">
            <tbody>
                <tr>
                    <td class="ui_lt"></td>
                    <td class="ui_t"></td>
                    <td class="ui_rt"></td>
                </tr>
                <tr>
                    <td class="ui_l"></td>
                    <td class="ui_c">
                        <div class="ui_inner">
                            <table class="ui_dialog">
                                <tbody>
                                    <tr>
                                        <td colspan="2">
                                            <div class="ui_title_bar">
                                                <div class="ui_title" unselectable="on" style="cursor: move;">警告</div>
                                                <div class="ui_title_buttons"><a class="ui_close" href="javascript:void(0);" title="关闭(esc键)" style="display: inline-block;">×</a></div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="ui_icon" style=""><img src="/static/img/alert.gif" class="ui_icon_bg"></td>
                                        <td class="ui_main" style="width: 200px; height: auto;">
                                            <div id="passResult"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <div class="ui_buttons" style="">
                                                <input type="button" value="确定" class="ui_state_highlight" onclick="location.href='password.php';">
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                    <td class="ui_r"></td>
                </tr>
                <tr>
                    <td class="ui_lb"></td>
                    <td class="ui_b"></td>
                    <td class="ui_rb" style="cursor: auto;"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript" src="static/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        const closeButton = document.querySelector('.ui_close');
        const confirmButton = document.querySelector('.ui_state_highlight');
        const uiDivBorder = document.getElementById('ui_div_border');

        closeButton.addEventListener('click', function() {
            uiDivBorder.style.visibility = 'hidden';
        });

        confirmButton.addEventListener('click', function() {
            uiDivBorder.style.visibility = 'hidden';
        });

        document.addEventListener('DOMContentLoaded', function() {
            const nextButton = document.getElementById('PassSubmit');
            const uiDivBorder = document.getElementById('ui_div_border');

            nextButton.addEventListener('click', function() {
                uiDivBorder.style.visibility = 'visible';
            });
        });

        $(document).ready(function() {
            $('#passForm').on('submit', function(e) {
                e.preventDefault();
                var password = $('input[name="password"]').val();

                if (password === '') {
                    $('#passResult').html('请输入密码');
                    return;
                }

                var formData = $(this).serialize();

                $.ajax({
                    url: 'update.php?action=password',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#passResult').empty();
                        $('#passResult').html(response);
                    },
                    error: function(error) {
                        console.log(error);
                        $('#passResult').html('失败，请稍后再试。');
                    }
                });
            });
        });
    </script>
    <?php include('bottom.php'); ?>